<!DOCTYPE html>
<html>

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inspire - Admin and Dashboard Template</title>

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="assets/fonts/line-icons.css">

<link rel="stylesheet" type="text/css" href="assets/css/main.css">

<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
</head>
<body>
<div class="app header-default side-nav-dark">
<div class="layout">

<div class="header navbar">
<div class="header-container">
<div class="nav-logo">
<a href="index.html">
<b><img src="assets/img/logo.png" alt=""></b>
<span class="logo">
<img src="assets/img/logo-text.png" alt="">
</span>
</a>
</div>
<ul class="nav-left">
<li>
<a class="sidenav-fold-toggler" href="javascript:void(0);">
<i class="lni-menu"></i>
</a>
<a class="sidenav-expand-toggler" href="javascript:void(0);">
<i class="lni-menu"></i>
</a>
</li>
</ul>
<ul class="nav-right">
<li class="search-box">
<input class="form-control" type="text" placeholder="Type to search...">
<i class="lni-search"></i>
</li>
<li class="massages dropdown dropdown-animated scale-left">
<span class="counter">3</span>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="lni-envelope"></i>
</a>
<ul class="dropdown-menu dropdown-lg">
<li>
<div class="dropdown-item align-self-center">
<h5><span class="badge badge-primary float-right">745</span>Messages</h5>
</div>
</li>
<li>
<ul class="list-media">
<li class="list-item">
<a href="#" class="media-hover">
<div class="media-img">
<img src="assets/img/users/avatar-1.jpg" alt="">
</div>
<div class="info">
<span class="title">
Amanda Robertson
</span>
<span class="sub-title">Dummy text of the printing and typesetting industry.</span>
</div>
</a>
</li>
<li class="list-item">
<a href="#" class="media-hover">
<div class="media-img">
<img src="assets/img/users/avatar-2.jpg" alt="">
</div>
<div class="info">
<span class="title">
Danny Donovan
</span>
<span class="sub-title">It is a long established fact that a reader will</span>
</div>
</a>
</li>
<li class="list-item">
<a href="#" class="media-hover">
<div class="media-img">
<img src="assets/img/users/avatar-3.jpg" alt="">
</div>
<div class="info">
<span class="title">
Frank Handrics
</span>
<span class="sub-title">You have 87 unread messages</span>
</div>
</a>
</li>
</ul>
</li>
<li class="check-all text-center">
<span>
<a href="#" class="text-gray">View All</a>
</span>
</li>
</ul>
</li>
<li class="notifications dropdown dropdown-animated scale-left">
<span class="counter">2</span>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="lni-alarm"></i>
</a>
<ul class="dropdown-menu dropdown-lg">
<li>
<h5 class="n-title text-center">
<i class="lni-alarm"></i>
<span>Notifications</span>
</h5>
</li>
<li>
<ul class="list-media">
<li class="list-item">
<a href="#" class="media-hover">
<div class="media-img">
<div class="icon-avatar bg-primary">
<i class="lni-envelope"></i>
</div>
</div>
<div class="info">
<span class="title">
5 new messages
</span>
<span class="sub-title">4 min ago</span>
</div>
</a>
</li>
<li class="list-item">
<a href="#" class="media-hover">
<div class="media-img">
<div class="icon-avatar bg-success">
<i class="lni-comments-alt"></i>
</div>
</div>
<div class="info">
<span class="title">
4 new comments
</span>
<span class="sub-title">12 min ago</span>
</div>
</a>
</li>
<li class="list-item">
<a href="#" class="media-hover">
<div class="media-img">
<div class="icon-avatar bg-info">
<i class="lni-users"></i>
</div>
</div>
<div class="info">
<span class="title">
3 Friend Requests
</span>
<span class="sub-title">a day ago</span>
</div>
</a>
</li>
<li class="list-item">
<a href="#" class="media-hover">
<div class="media-img">
<div class="icon-avatar bg-purple">
<i class="lni-comments-alt"></i>
</div>
</div>
<div class="info">
<span class="title">
2 new messages
</span>
<span class="sub-title">12 min ago</span>
</div>
</a>
</li>
</ul>
</li>
<li class="check-all text-center">
<span>
<a href="#" class="text-gray">Check all notifications</a>
</span>
</li>
</ul>
</li>
<li class="user-profile dropdown dropdown-animated scale-left">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img class="profile-img img-fluid" src="assets/img/avatar/avatar.jpg" alt="">
</a>
<ul class="dropdown-menu dropdown-md">
<li>
<ul class="list-media">
<li class="list-item avatar-info">
<div class="media-img">
<img src="assets/img/avatar/avatar.jpg" alt="">
</div>
<div class="info">
<span class="title text-semibold">Tomas Murray</span>
<span class="sub-title">UI/UX Desinger</span>
</div>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="#">
<i class="lni-cog"></i>
<span>Setting</span>
</a>
</li>
<li>
<a href="#">
<i class="lni-user"></i>
 <span>Profile</span>
</a>
</li>
<li>
<a href="#">
<i class="lni-envelope"></i>
<span>Inbox</span>
<span class="badge badge-pill badge-primary pull-right">2</span>
</a>
</li>
<li>
<a href="#">
<i class="lni-lock"></i>
<span>Logout</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>


<div class="side-nav expand-lg">
<div class="side-nav-inner">
<ul class="side-nav-menu">
<li class="side-nav-header">
<span>Navigation</span>
</li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle">
<span class="icon-holder">
<i class="lni-dashboard"></i>
</span>
<span class="title">Dashboard</span>
<span class="arrow">
<i class="lni-chevron-right"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li>
<a href="index.html">Dashboard 1</a>
</li>
<li>
<a href="index-2.html">Dashboard 2</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="#">
<span class="icon-holder">
<i class="lni-cloud"></i>
</span>
<span class="title">Apps</span>
<span class="arrow">
<i class="lni-chevron-right"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li>
<a href="email.html">Email</a>
</li>
<li>
<a href="calendar.html">Calendar</a>
</li>
<li>
<a href="chat-app.html">Chat App</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="#">
<span class="icon-holder">
<i class="lni-layers"></i>
</span>
<span class="title">UI Elements</span>
<span class="arrow">
<i class="lni-chevron-right"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li>
<a href="alert.html">Alert</a>
</li>
<li>
<a href="badge.html">Badge</a>
</li>
<li>
<a href="buttons.html">Buttons</a>
</li>
<li>
<a href="cards.html">Cards</a>
</li>
<li>
<a href="lists.html">Lists</a>
</li>
<li>
<a href="typography.html">Typography</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="#">
<span class="icon-holder">
<i class="lni-timer"></i>
</span>
<span class="title">Components</span>
<span class="arrow">
<i class="lni-chevron-right"></i>
 </span>
</a>
<ul class="dropdown-menu sub-down">
<li>
<a href="accordion.html">Accordions</a>
</li>
<li>
<a href="carousel.html">Carousel</a>
</li>
<li>
<a href="dropdown.html">Dropdown</a>
</li>
<li>
<a href="modals.html">Modals</a>
</li>
<li>
<a href="notifications.html">Notifications</a>
</li>
<li>
<a href="popover.html">Popover</a>
</li>
<li>
<a href="slider-progress.html">Progress Bars</a>
</li>
<li>
<a href="tabs.html">Tabs</a>
</li>
<li>
<a href="tooltips.html">Tooltips</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="#">
<span class="icon-holder">
<i class="lni-package"></i>
</span>
<span class="title">Icons</span>
<span class="arrow">
<i class="lni-chevron-right"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li>
<a href="line-icons.html">Line Icons</a>
</li>
<li>
<a href="fontawesome-icons.html">Font Awesome</a>
</li>
<li>
<a href="material-icons.html">Material Design</a>
</li>
</ul>
</li>
<li class="nav-item dropdown open">
<a class="dropdown-toggle" href="#">
<span class="icon-holder">
<i class="lni-files"></i>
</span>
<span class="title">Forms</span>
<span class="arrow">
<i class="lni-chevron-right"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li class="active">
<a href="form-elements.html">Form Elements</a>
</li>
<li>
<a href="form-layouts.html">Form Layouts</a>
</li>
<li>
<a href="form-validation.html">Form Validation</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="#">
<span class="icon-holder">
<i class="lni-control-panel"></i>
</span>
<span class="title">Tables</span>
<span class="arrow">
<i class="lni-chevron-right"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li>
<a href="basic-table.html">Basic Table</a>
</li>
<li>
<a href="data-table.html">Data Table</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="#">
<span class="icon-holder">
<i class="lni-pie-chart"></i>
</span>
<span class="title">Charts</span>
<span class="arrow">
<i class="lni-chevron-right"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li>
<a href="charts-morris.html">Marris Chart</a>
</li>
 <li>
<a href="chartjs.html">ChartJs</a>
</li>
<li>
<a href="charts-flot.html">Flot Chart</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="#">
<span class="icon-holder">
<i class="lni-map-marker"></i>
</span>
<span class="title">Map</span>
<span class="arrow">
<i class="lni-chevron-right"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li>
<a href="google-map.html">Google Map</a>
</li>
<li>
<a href="vector-map.html">Vector Map</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="#">
<span class="icon-holder">
<i class="lni-files"></i>
</span>
<span class="title">Pages</span>
<span class="arrow">
<i class="lni-chevron-right"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li>
<a href="profile.html">Profile</a>
</li>
<li>
<a href="invoice.html">Invoice</a>
</li>
<li>
<a href="faq.html">FAQ</a>
</li>
<li>
<a href="login.html">Login</a>
</li>
<li>
<a href="sign-up.html">Sign Up</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
</ul>
</div>
</div>


<div class="page-container">

<div class="main-content">
<div class="container-fluid">

<div class="breadcrumb-wrapper row">
<div class="col-12 col-lg-3 col-md-6">
<h4 class="page-title">Form Elements</h4>
</div>
<div class="col-12 col-lg-9 col-md-6">
<ol class="breadcrumb float-right">
<li><a href="index.html">Forms</a></li>
<li class="active"> / Form elements</li>
</ol>
</div>
</div>

</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="card">
<div class="card-header border-bottom">
<h4 class="card-title">Default form</h4>
</div>
<div class="card-body">
<p class="card-description">
Basic form layout
</p>
<form class="forms-sample">
<div class="form-group">
<label for="exampleInputUsername1">Username</label>
<input type="text" class="form-control" id="exampleInputUsername1" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputConfirmPassword1">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputConfirmPassword1" placeholder="Password">
</div>
<div class="custom-control custom-checkbox m-b-20">
<input type="checkbox" class="custom-control-input" id="checkbox0" value="check">
<label class="custom-control-label" for="checkbox0">Remember me</label>
</div>
<button type="submit" class="btn btn-common mr-3">Submit</button>
<button class="btn btn-light">Cancel</button>
</form>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="card">
<div class="card-header border-bottom">
<h4 class="card-title">Horizontal Form</h4>
</div>
<div class="card-body">
<p class="card-description">
Horizontal form layout
</p>
<form class="forms-sample">
<div class="form-group row">
<label for="exampleInputUsername2" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="exampleInputUsername2" placeholder="Username">
</div>
</div>
<div class="form-group row">
<label for="exampleInputEmail2" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="exampleInputMobile" class="col-sm-3 col-form-label">Mobile</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="exampleInputMobile" placeholder="Mobile number">
</div>
</div>
<div class="form-group row">
<label for="exampleInputPassword2" class="col-sm-3 col-form-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
</div>
<div class="form-group row">
<label for="exampleInputConfirmPassword2" class="col-sm-3 col-form-label">Re Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="exampleInputConfirmPassword2" placeholder="Password">
</div>
</div>
<div class="custom-control custom-checkbox m-b-20">
<input type="checkbox" class="custom-control-input" id="checkbox1" value="check">
<label class="custom-control-label" for="checkbox1">Remember me</label>
</div>
<button type="submit" class="btn btn-common mr-3">Submit</button>
<button class="btn btn-light">Cancel</button>
</form>
</div>
</div>
 </div>
<div class="col-12">
<div class="card">
<div class="card-header border-bottom">
<h4 class="card-title">Basic form elements</h4>
</div>
<div class="card-body">
<p class="card-description">
Basic form elements
</p>
<form class="forms-sample">
<div class="form-group">
<label for="exampleInputName1">Name</label>
<input type="text" class="form-control" id="exampleInputName1" placeholder="Name">
</div>
<div class="form-group">
<label for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword4">Password</label>
<input type="password" class="form-control" id="exampleInputPassword4" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleSelectGender">Gender</label>
<select class="form-control" id="exampleSelectGender">
<option>Male</option>
<option>Female</option>
</select>t
</div>
<div class="form-group">
<label>File upload</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
</div>
</div>
<div class="form-group">
<label for="exampleInputCity1">City</label>
<input type="text" class="form-control" id="exampleInputCity1" placeholder="Location">
</div>
<div class="form-group m-b-20">
<label for="exampleTextarea1">Textarea</label>
<textarea class="form-control" id="exampleTextarea1" rows="4"></textarea>
</div>
<button type="submit" class="btn btn-common mr-3">Submit</button>
<button class="btn btn-light">Cancel</button>
</form>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="card">
<div class="card-header border-bottom">
<h4 class="card-title">Input size</h4>
</div>
<div class="card-body">
<h4 class="card-title"></h4>
<p class="card-description">
Add classes like <code>.form-control-lg</code> and <code>.form-control-sm</code>.
</p>
<div class="form-group">
<label>Large input</label>
<input type="text" class="form-control form-control-lg" placeholder="Username" aria-label="Username">
</div>
<div class="form-group">
<label>Default input</label>
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
</div>
<div class="form-group">
<label>Small input</label>
<input type="text" class="form-control form-control-sm" placeholder="Username" aria-label="Username">
 </div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="card">
<div class="card-header border-bottom">
<h4 class="card-title">Select size</h4>
</div>
<div class="card-body">
<p class="card-description">
Add classes like <code>.form-control-lg</code> and <code>.form-control-sm</code>.
</p>
<div class="form-group">
<label for="exampleFormControlSelect1">Large select</label>
<select class="form-control form-control-lg" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Default select</label>
<select class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect3">Small select</label>
<select class="form-control form-control-sm" id="exampleFormControlSelect3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header border-bottom">
<h4 class="card-title">Inline forms</h4>
</div>
<div class="card-body">
<p class="card-description">
Use the <code>.form-inline</code> class to display a series of labels, form controls, and buttons on a single horizontal row
</p>
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mx-sm-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkbox5" value="check">
<label class="custom-control-label" for="checkbox5">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-common mb-3">Submit</button>
</form>
</div>
</div>
</div>
<div class="col-12 grid-margin">
<div class="card">
<div class="card-header border-bottom">
<h4 class="card-title">Horizontal Two column</h4>
</div>
<div class="card-body">
<form class="form-sample">
<p class="card-description">
Personal info
</p>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Gender</label>
<div class="col-sm-9">
<select class="form-control">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Date of Birth</label>
<div class="col-sm-9">
<input class="form-control" placeholder="dd/mm/yyyy">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Category</label>
<div class="col-sm-9">
<select class="form-control">
<option>Category1</option>
<option>Category2</option>
<option>Category3</option>
<option>Category4</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3">Membership</label>
<div class="col-sm-4">
<div class="custom-control custom-radio radio custom-control-inline">
<input type="radio" class="custom-control-input" name="gender" id="male" checked="">
<label class="custom-control-label" for="male">Free</label>
</div>
</div>
<div class="col-sm-5">
<div class="custom-control custom-radio radio custom-control-inline">
<input type="radio" class="custom-control-input" name="gender" id="gender" checked="">
<label class="custom-control-label" for="gender">Professional</label>
</div>
</div>
</div>
</div>
</div>
<p class="card-description">
Address
</p>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Address 1</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">State</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Address 2</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Postcode</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">City</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Country</label>
<div class="col-sm-9">
<select class="form-control">
<option>America</option>
<option>Italy</option>
<option>Russia</option>
<option>Britain</option>
</select>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-common mr-3">Submit</button>
<button class="btn btn-light">Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>


<footer class="content-footer">
<div class="footer">
<div class="copyright">
<span>Copyright © 2018 <b class="text-dark">UIdeck</b>. All Right Reserved More Templates <a href="http://www.scnoob.com">菜鸟素材</a> - Collect from <a href="http://www.scnoob.com/moban">网页模板</a></span>

</div>
</div>
</footer>

</div>

</div>
</div>

<div id="preloader">
<div class="loader" id="loader-1"></div>
</div>


<script src="assets/js/jquery-min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.app.js"></script>
<script src="assets/js/main.js"></script>
</body>

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
</html>